<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Special Message</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
        
        .card-transition {
            transition: all 0.5s ease-in-out;
        }
        .heartbeat {
            animation: heartbeat 1.2s infinite;
        }
        @keyframes heartbeat {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        .handwriting {
            font-family: 'Pacifico', cursive;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-pink-100 to-blue-100 min-h-screen relative overflow-hidden">
    <!-- 卡片容器 -->
    <div class="absolute inset-0 transition-all duration-500">
        <!-- 卡片1 -->
        <div id="card1" class="card-transition absolute inset-4 bg-white rounded-2xl shadow-lg p-6 flex flex-col items-center justify-center">
            <div class="text-6xl mb-4">🎐</div>
            <p class="text-gray-600 text-center mb-4">今天有阵特别的风</p>
            <p class="text-gray-400 text-sm">点击继续</p>
        </div>

        <!-- 卡片2 -->
        <div id="card2" class="card-transition absolute inset-4 bg-white rounded-2xl shadow-lg p-6 flex flex-col items-center justify-center hidden">
            <div class="text-6xl mb-4 animate-bounce">🌸</div>
            <p class="text-gray-600 text-center">带着樱花的香气</p>
        </div>

        <!-- 卡片3 -->
        <div id="card3" class="card-transition absolute inset-4 bg-white rounded-2xl shadow-lg p-6 flex flex-col items-center justify-center hidden">
            <div class="text-6xl mb-4">☁️</div>
            <p class="text-gray-600 text-center">穿过夏日云层</p>
            <div class="w-full h-1 bg-gradient-to-r from-pink-200 to-blue-200 mt-4 rounded-full"></div>
        </div>

        <!-- 卡片4 -->
        <div id="card4" class="card-transition absolute inset-4 bg-white rounded-2xl shadow-lg p-6 flex flex-col items-center justify-center hidden">
            <div class="text-6xl mb-4 rotate-12">💌</div>
            <p class="text-gray-600 text-center">送来一封特别的信</p>
        </div>

        <!-- 卡片5 -->
        <div id="card5" class="card-transition absolute inset-4 bg-white rounded-2xl shadow-lg p-6 flex flex-col items-center justify-center hidden">
            <div class="text-6xl mb-4">🎁</div>
            <p class="text-gray-600 text-center">请查收这份心意</p>
        </div>
    </div>

    <!-- 最终界面 -->
    <div id="final" class="absolute inset-0 hidden flex-col items-center justify-center p-6">
        <div class="heartbeat text-6xl mb-8">💖</div>
        <h1 class="handwriting text-3xl text-pink-600 mb-4">我喜欢你</h1>
        <p class="text-gray-600 text-center leading-loose">
            像风走了八千里<br>
            不问归期<br>
            像星辰奔波亿万年<br>
            不曾停歇<br>
            你愿意和我一起<br>
            续写这个故事吗？
        </p>
        <div class="mt-8 flex gap-4">
            <button onclick="showConfetti(true)" class="px-6 py-2 bg-green-500 text-white rounded-full shadow-md">愿意！</button>
            <button onmouseover="this.classList.add('hidden');document.getElementById('runaway').classList.remove('hidden')" 
                    class="px-6 py-2 bg-red-500 text-white rounded-full shadow-md">再想想</button>
            <button id="runaway" class="hidden px-6 py-2 bg-yellow-500 text-white rounded-full shadow-md">逃不掉的啦</button>
        </div>
    </div>

    <script>
        let currentCard = 1;
        
        document.body.addEventListener('click', () => {
            if(currentCard >= 5) return;
            
            const currentElement = document.getElementById(`card${currentCard}`);
            const nextElement = document.getElementById(`card${currentCard + 1}`);
            
            currentElement.classList.add('hidden');
            nextElement.classList.remove('hidden');
            currentCard++;
            
            if(currentCard === 5) {
                setTimeout(() => {
                    document.querySelectorAll('[id^=card]').forEach(el => el.classList.add('hidden'));
                    document.getElementById('final').classList.remove('hidden');
                }, 2000);
            }
        });

        function showConfetti() {
            const colors = ['#ff69b4', '#ffd700', '#7cfc00', '#00bfff'];
            for(let i = 0; i < 50; i++) {
                const confetti = document.createElement('div');
                confetti.style.cssText = `
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    background: ${colors[Math.floor(Math.random()*colors.length)]};
                    border-radius: 50%;
                    left: ${Math.random()*100}%;
                    top: -10px;
                    animation: confetti-fall ${Math.random()*3 + 2}s linear;
                `;
                
                document.body.appendChild(confetti);
                setTimeout(() => confetti.remove(), 5000);
            }
        }

        // 添加随机飘动效果
        setInterval(() => {
            const elements = document.querySelectorAll('[class*="text-6xl"]');
            elements.forEach(el => {
                el.style.transform = `rotate(${Math.random()*10 - 5}deg) translate(${Math.random()*10 - 5}px, ${Math.random()*10 - 5}px)`;
            });
        }, 3000);
    </script>

    <style>
        @keyframes confetti-fall {
            100% {
                transform: translateY(110vh) rotate(360deg);
            }
        }
        .handwriting {
            font-family: 'Pacifico', cursive;
        }
    </style>
</body>
</html>
